<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义Tailwind配置 */
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .poll-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .poll-transition {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
    <div class="poll-container max-w-md w-full bg-white rounded-xl poll-shadow overflow-hidden">
        <!-- 投票头部 -->
        <header class="poll-header bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-6">
            <h1 class="poll-title text-2xl font-bold text-center">
                <i class="fas fa-poll-h mr-2"></i>请选择投票项目：
            </h1>
        </header>

        <!-- 投票内容 -->
        <main class="poll-content p-6">
            {% if latest_question_list %}
                <ul class="poll-list space-y-3">
                    {% for question in latest_question_list %}
                        <li class="poll-item">
                            <a href="{% url 'polls:detail' question.id %}" class="poll-link block p-4 bg-gray-50 rounded-lg hover:bg-gray-100 poll-transition flex items-start">
                                <div class="text-blue-600 mr-3 text-xl"><i class="fas fa-question-circle"></i></div>
                                <div>
                                    <h3 class="font-semibold text-gray-800">{{ question.question_text }}</h3>
                                    <p class="text-sm text-gray-500 mt-1">{{ question.pub_date|date:"Y年m月d日 H:i" }}</p>
                                </div>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="no-polls-message text-center py-10 text-gray-500">
                    <i class="fas fa-exclamation-triangle text-3xl block mx-auto mb-3 text-gray-300"></i>
                    暂无可用投票项目。
                </p>
            {% endif %}
        </main>

        <!-- 投票页脚 -->
        <footer class="poll-footer bg-gray-800 text-white p-4">
            <a href="/admin/" class="admin-link flex items-center justify-center text-sm text-gray-200 hover:text-white poll-transition">
                <i class="fas fa-cog mr-2"></i>后台管理
            </a>
        </footer>
    </div>

    <script>
        // 简单的交互增强
        document.querySelectorAll('.poll-link').forEach(link => {
            link.addEventListener('mouseenter', function() {
                this.querySelector('i').classList.add('animate-pulse');
            });
            link.addEventListener('mouseleave', function() {
                this.querySelector('i').classList.remove('animate-pulse');
            });
        });
    </script>
</body>
</html>